<template>
    <div class="dynamic">
        <!-- 先布局，再对接口 -->
        <div>
            <div>{{intime}}</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in List" :key='item.id' class="topColor">
                    <div class="grid-content bg-purple" style="color:#ff6900;font-weight:700">{{item.num}}</div>
                    <div class="grid-content bg-purple">{{item.name}}</div>
                </el-col>
            </el-row>
        </div>
        <div>
            <div>截至：{{endTime}}</div>
            <el-row :gutter="20">
            <el-col :span="8" v-for="item in listData" :key='item.id' class="selectColor">
                <div class="grid-content bg-purple" style="color:#ff6900;font-weight:700">{{item.num}}</div>
                <div class="grid-content bg-purple">{{item.name}}</div>
            </el-col>
            </el-row>
        </div>
        <div class="table">
            <div>国内疫情</div>
            <el-row class="Span">
                <el-col :span="4"><div style="background-color:#e0e1fd;" class="grid-content bg-purple">地区</div></el-col>
                <el-col :span="4"><div style="background-color:#dd837f;" class="grid-content bg-purple-light">新增确诊</div></el-col>
                <el-col :span="4"><div style="background-color:#f4d3aa;" class="grid-content bg-purple">新增疑似</div></el-col>
                <el-col :span="4"><div style="background-color:#fdcccb;" class="grid-content bg-purple-light">新增死亡</div></el-col>
                <el-col :span="4"><div style="background-color:#c5eab4;" class="grid-content bg-purple">新增治愈</div></el-col>
                <el-col :span="4"><div style="background-color:#d2d2d2;" class="grid-content bg-purple-light">境外输入</div></el-col>
            </el-row>
            <el-row v-for="item in tableData" :key="item.id" class="bottom_div">
                <el-col :span="4"><div class="grid-content">{{item.province}}</div></el-col>
                <el-col :span="4"><div class="grid-content">{{item.confirmed}}</div></el-col>
                <el-col :span="4"><div class="grid-content">{{item.suspected}}</div></el-col>
                <el-col :span="4"><div class="grid-content">{{item.dead}}</div></el-col>
                <el-col :span="4"><div class="grid-content">{{item.cure}}</div></el-col>
                <el-col :span="4"><div class="grid-content">{{item.outside}}</div></el-col>
            </el-row>
        </div>
        <div>
            <div>最新进展</div>
            <div style="background-color:#f8f8f8;padding:20px 10px" v-for="item in laterst_news" :key="item.id" @click="showDetall(item)">
                <div class="circle"></div>
                <div class="tag">最新</div>
                <div class="time">{{item.publishTime | dataFMT}}</div>
                <div class="content">{{item.title}}</div>
            </div>
            
        </div>
        <el-dialog title="新闻资讯" :visible.sync="dialogTableVisible">
            <!-- v-html可以将标签内的内容解析出来 -->
            <div v-html="dialogData.content"></div>
        </el-dialog>
    </div>
</template>
<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            dialogTableVisible:false,
            params:{
                page:1,
                pageSize:10000
            },
            List:[],
            listData:[],
            endTime:'',
            intime:'',
            // 表格数据
            tableData:[],
            // 最新新闻
            laterst_news:{},
            dialogData:{}
        }
    },
    filters:{
        dataFMT(str){
            return moment(str).format('YYYY 年 MM 月 DD 日')
        }
    },
    created(){
        this.queryAll()
        this.queryNews()
    },
    methods:{
        // 显示新闻详情
        showDetall(item){
            // 当前行数据赋值给模态框数据
            this.dialogData = item
            this.dialogTableVisible = true
        },
        // 查询最新的新闻动态
        queryNews(){
            let obj = {
                page:1,
                pageSize:1000,
                categoryId:3
            }
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:obj
            }).then((res)=>{
                this.laterst_news = res.data.data.list
            })
        },
        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 封装列表数据
                this.tableData = res.data.data.list
                // 封装截止时间
                this.endTime = moment(res.data.data.list[0].inputTime).format('YYYY 年 MM 月 DD 日 HH 时 mm 分 ss秒')
                this.intime = moment(res.data.data.list[0].inputTime).format('YYYY 年 MM 月 DD 日')
                var confirmed_total=0
                var confirmed_total2=0
                var dead_total=0
                var dead_total2=0
                var suspected_total=0
                var cure_total=0
                var severe_total=0
                var outside_total=0
                var outside_total2=0
                var local_tolal=0
                res.data.data.list.forEach((item)=>{
                    confirmed_total += item.confirmed
                    dead_total += item.dead
                    suspected_total += item.suspected
                    cure_total += item.cure
                    severe_total += item.severe
                    outside_total += item.outside
                    // local_tolal = confirmed_total - outside_total
                    if(this.intime==moment(item.inputTime).format('YYYY 年 MM 月 DD 日')){
                        confirmed_total2 += item.confirmed
                        outside_total2 += item.outside
                        local_tolal = confirmed_total2 - outside_total2
                    }
                })
                var pro1 = {
                    id:1,
                    name:'新增确诊',
                    num:confirmed_total2
                }
                var pro2 = {
                    id:2,
                    name:'本土新增',
                    num:local_tolal
                }
                var pro3 = {
                    id:3,
                    name:'境外输入',
                    num:outside_total2
                }
                this.List.push(pro1,pro2,pro3)
                var obj1 = {
                    id:1,
                    name:'现有确诊',
                    num:confirmed_total
                }
                var obj2 = {
                    id:2,
                    name:'现有疑似',
                    num:suspected_total
                }
                var obj3 = {
                    id:3,
                    name:'累计出院',
                    num:cure_total
                }
                var obj4 = {
                    id:4,
                    name:'累计境外输入',
                    num:outside_total
                }
                var obj5 = {
                    id:5,
                    name:'还活着的',
                    num:severe_total
                }
                var obj6 = {
                    id:6,
                    name:'累计死亡',
                    num:dead_total
                }
                this.listData.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })
            
        }
    }
}
</script>



<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .topColor .bg-purple {
      background-color: #eefaff;
  }
  .selectColor .bg-purple{
      background-color: #fbf5ef;
  }
  .content {
      background-color: white;
      padding: 10px;
      border-radius: 5px;
      padding: 10px;
  }
  .circle{
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-color: blue;
  }
  .tag {
      background-color: red;
      font-size: 14px;
      color: white;
      padding:4px;
      border-radius: 5px;
  }
  .time {
      font-weight: 600;
  }
  .circle , .tag , .time  {
      display: inline-block;
      margin-left: 10px;
  }
  .table .Span div{
      line-height: 60px;
  }
  .bottom_div div{
      border-bottom: 1px solid #ededed;
  }
  .table,.el-row{
      margin-bottom: 0;
  }
  .table,.el-col{
      margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /* border-radius: 4px; */
    min-height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>